<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
</head>
<script src="vue.js"></script>
<body>
        <div id="app">
            <!-- 省份:  <input type="text" v-model="province" @keyup="setAddress">  <br>
            城市:  <input type="text" v-model="city" @keyup="setAddress"> <br> -->
            省份:  <input type="text" v-model="province">  <br>
            城市:  <input type="text" v-model="city" > <br>
            <p>收信人地址：{{this.fullAddress}} </p>
        </div>
       
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    province:'',
                    city:'',
                    fullAddress:''
                },
                // methods:{
                //     setAddress(){
                //         this.fullAddress = this.province + '-' + this.city;
                //     }
                // }
                watch:{
                    // 监听的时候，key可以加引号，也可以不加引号，key必须是一个数据成员
                    // key对应的function有2个默认的参数可以使用
                    // key对象的function在被监听的数据发生改变时，就会被立刻调用
                    'province':function(newValue,oldValue){
                        this.fullAddress = this.province + '-' + this.city;
                        console.log(newValue+"——————"+oldValue);
                    },
                    city:function(){
                        this.fullAddress = this.province + '-' + this.city;
                    }
                } 
            })

            // vue提供了一个用来监听具体数据变化的工具，叫做watch
            //通过watch，我们可以监听一些数据是否发生改变，如果改变了，我们可以做一些预定的操作
            // watch是vm的成员，如果需要使用，应该把它挂载到vm对象身上
        </script>
</body>
</html>